<script setup>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
import router from "@/router/index.js";
import {post} from "@/util/axios.js";
import Identify from '@/components/captcha/Identify.vue';
import api from "./api.js";
import {captchaCode, generateCode} from '@/components/captcha/captcha.js'
import backgroundOne from "@/components/background/bg1.vue";

// 表单引用
const formObj = ref();

// 表单数据
const forgetForm = reactive({
    username: '',
    phone: '',
    password: '',
    confirmPassword: '',
    captcha: captchaCode
});

const requestForm = reactive({
    username: '',
    phone: '',
    password: '',
});

const giveForm = () => {
    requestForm.username = forgetForm.username;
    requestForm.phone = forgetForm.phone;
    requestForm.password = forgetForm.password;
}

// 表单验证规则
const rules = {
    username: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
    ],
    phone: [
        {required: true, message: '请输入手机号', trigger: 'blur'},
        // {
        //     pattern: /^1[3-9]\d{9}$/,
        //     message: '请输入正确的手机号格式',
        //     trigger: 'blur',
        // },
    ],
    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
    confirmPassword: [
        {required: true, message: '请再次输入密码', trigger: 'blur'},
        {
            validator: (rule, value, callback) => {
                if (value !== forgetForm.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur',
        },
    ],
    captcha: [{required: true, message: '请输入验证码', trigger: 'blur'}],
};


// 提交表单
const captchaTest = ref('');

const submit = () => {
    giveForm()
    captchaTest.value = forgetForm.captcha.toUpperCase()
    formObj.value.validate((valid) => {
        if (valid) {
            if (captchaTest.value === captchaCode.value) {
                console.dir(requestForm)
                post(api.forget, requestForm, content => {
                    router.replace('/login');
                }, formObj.value);
                generateCode()
            } else {
                generateCode()
                ElMessage.error('验证码错误');
            }
        } else {
            generateCode()
            ElMessage.error('请检查填写信息');
        }
    });
}

// 重置表单
const resetForm = () => {
    generateCode();
    formObj.value.resetFields();
};

</script>


<template>
    <div class="register-container">
        <backgroundOne/>
        <el-card class="register-card">
            <h2 class="register-title">重置密码</h2>
            <el-form :model="forgetForm" :rules="rules" ref="formObj" label-width="100px">
                <!-- 用户名 -->

                <el-form-item label="用户名" prop="username">
                    <el-input v-model="forgetForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!-- 手机号 -->
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="forgetForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item label="新密码" prop="password">
                    <el-input
                            v-model="forgetForm.password"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                    ></el-input>
                </el-form-item>

                <!-- 确认密码 -->
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input
                            v-model="forgetForm.confirmPassword"
                            type="password"
                            placeholder="请再次输入密码"
                            show-password
                    ></el-input>
                </el-form-item>

                <!-- 验证码 -->
                <el-form-item label="验证码" prop="captcha">
                    <div class="captcha-wrapper">
                        <el-input
                                style="height: 40px"
                                v-model="forgetForm.captcha"
                                placeholder="请输入验证码"
                                class="captcha-input"
                                clearable
                        />
                        <Identify class="identify"/>
                    </div>
                </el-form-item>

                <!-- 提交按钮 -->
                <el-form-item class="btn">
                    <el-button type="primary" @click="submit">提交修改</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 已有账号？登录 -->
            <div class="login-link">
                <router-link class="router-link" to="/login">返回登录</router-link>
                <router-link class="router-link" type="info" to="/register">前往注册</router-link>
            </div>
        </el-card>
    </div>
</template>


<style scoped>
.btn {
    margin-top: 10px;
}

.router-link {
    color: #6fb6ff;

    &:hover {
        color: #c8e1ff;
    }
}

.el-input {
    height: 40px;
}

.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #a4e7ff;
}

.register-card {
    border-radius: 10px;
    width: 500px;
    padding: 20px;
}

.captcha-wrapper {
    display: flex;
    gap: 10px;
    height: 40px;
}

.register-title {
    text-align: center;
    margin-bottom: 20px;
}

.login-link {
    width: 250px;
    display: flex;
    margin: 15px auto;
    justify-content: space-between;
}
</style>